<template>
  <view class="quesiton-page-iq">
  
    <navigationBar :emitBackEvent="true" @backEvent="$emit('backHandle')" :my-property="navigationBarDataInfo"/>


    <view class="main-wrapper-abs"
      :style="{'top':topH+'rpx'}"
    >
      <view class="main-wrapper"
        :style="{'background-image':`url(${staticImgs.bg})`}"
      >

        <view class="progress-wrapper-abs" >
          <view class="progress-wrapper">
            <template>
              <lxProgressBar
                backColor="#FFFFFF"
                contentColor="linear-gradient( 90deg, #B0FFE8 0%, #93D7F8 100%);"
                barRadius="18rpx"
                :total="100"
                barHeight="30rpx"
                :first-value="percent"
                animation
                :minWidth="0"
              />
              
            </template>
            <view class="num-wrapper"
              :style="{'background-image':`url(${staticImgs.numBg})`,'left':progressNum+'rpx'}"
            >
              {{percent}}%
            </view>
            
            <view class="gift-wrapper" v-if="showGift">
              <image class="img" :src="staticImgs.gift" mode="widthFix"></image>
            </view>
          </view>
        </view>
        
        
        <view class="decorate-wrapper">
          <image class="img" :src="staticImgs.decorate" mode="widthFix"></image>
        </view>
        <view class="card-wrapper-abs">
          
          <view style="position: relative;">
            <view class="card-wrapper"
              
            >
              
              <view class="abs-dd"></view>
              <view class="clock-wrapper">
                 <image class="clock-icon" :src="staticImgs.timeIcon" mode="widthFix"></image>
                  <view class="clock-text">{{countTimeStr}}</view>
              </view>
              <view class="row-1">
                <view class="col-1">问题</view>
                <view class="col-2">{{current}}</view>
                <view class="col-3">/{{max}}</view>
              </view>
              <view class="question-box">
                {{questionObj.qstnContent || ''}}
              </view>
              <view class="question-img-box" v-if="questionObj.qstnImg">
                <image class="img" :src="questionObj.qstnImg" mode="aspectFit"
                  @click="previewImg(questionObj.qstnImg)"
                ></image>
              </view>
              
              <!-- <view> -->
             <!-- <scroll-view scroll-y="true" style="height: 508rpx;"> -->
                <template v-if="questionObj.subjectivity">
                  <view class="input-wrapper" v-if="skipValidationFieldId == questionObj.id">
                    <u--input
                      v-if="!reloadInputBox"
                      :placeholder="questionObj.qstnContent"
                      clearable
                      @input="inputEventHandle_1"
                      :value="currentInputCon"
                    >
                    </u--input>
                  </view>
                  <view class="input-wrapper"  v-else>
                    <u--input
                      v-if="!reloadInputBox"
                      :placeholder="questionObj.qstnContent"
                      clearable
                      @input="inputEventHandle"
                      :value="currentInputCon"
                    >
                    </u--input>
                  </view>
                </template>
               
                <template v-else-if="questionType">
                  <view class="scroll-wrap"> 
                    <scroll-view enhanced :show-scrollbar="true" class="scroll-y-view d-q-a-iq-scroll-y-view" scroll-y="true"   style="height:100%;" >
                      <view style="    width: 100%;
    box-sizing: border-box;">
                        
                      
                      <view class="opt-imgs-wrapper">
                        <view 
                          class="opt-item-box" 
                          v-for="(item,index) in optnList" 
                          :class="[
                            item.select&&item.select=='1'?'opt-item-act':''
                          ]" 
                          :key="index" 
                          @click="selectAnswer(item,index)"
                        >
                          <!-- <view class="text-wrapper">{{questionZiMu[index]}}.</view> -->
                          <image class="img" :src="item.optnImg" mode=""></image>
                        </view>
                        
                        </view>
                      </view>
                    </scroll-view>
                  </view>
                  
                </template>
                
                <template v-else>
                  <view class="scroll-wrap"> 
                  <scroll-view class="scroll-y-view" enhanced :show-scrollbar="true" scroll-y="true" style="height: 100%">
                  <view class="opt-wrapper">
                    <view
                      class="opt-item-box"
                      v-for="(item,index) in optnList" 
                      :class="[
                        item.select&&item.select=='1'?'opt-item-act':''
                      ]" 
                      :key="index" 
                      @click="selectAnswer(item,index)"
                    >
                      <view>{{questionZiMu[index]}}.{{item.optnContent}}</view>
                    </view>
                  </view>
                  </scroll-view>
                  </view>
                </template>
             
              <!-- </scroll-view> -->
              <!-- </view> -->
              
            </view>
            
          
        </view>
        
        <view class="btn-group-wrapper">
                  <view
                    class="btn-box"
                    :style="{'background-image':`url(${staticImgs.btn1})`}"
                    @click="$emit('prev')"
                  >
                    上一题
                  </view>
                  <view
                    class="btn-box"
                    :style="{'background-image':`url(${staticImgs.btn2})`}"
                    @click="$emit('go')"
                  >
                    目录
                  </view>
                  <view
                    class="btn-box"
                    :style="{'background-image':`url(${staticImgs.btn1})`}"
                    @click="$emit('next')"
                  >
                    {{max==current?'提交':'下一题'}}
                  </view>
                </view>
              
            
            </view>
          
        </view>
        
        
        <view class="decorate-bottom" v-if="!reRenderLegend">
          <image class="img" :src="legendImg" mode="widthFix"></image>
        </view>
    </view>
    
    
    
    <!-- <view
      class="bg-bottom"
      :style="{'background-image':`url(${staticImgs.bgBottom})`}"
    >
    </view> -->
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import lxProgressBar from '@/subcontractorD/components/lx-progress-bar/components/lx-progress-bar/lx-progress-bar.vue'
  var app = getApp();
  let countTimer;
  let clockTimer;
  export default {
    components:{
      navigationBar,
      lxProgressBar
    },
    props:{
      percent:{
        type:Number,
        default:0
      },
      max:{
        type:Number,
        default:0
      },
      current:{
        type:Number,
        default:0
      },
      countTime:{
        type:String,
        default:''
      },
      optnList:{
        type:Array,
        default:()=>[]
      },
      questionObj:{
        type:Object,
        default:()=>{}
      },
      questionType:{
        type:Boolean,
        default:false
      },
      showGift:{
        type:Boolean,
        default:false
      },
      mbtiType:{
        type:String,
        default:'job-mbti'
      }
    },
    data(){
      return {
        navigationBarDataInfo:{
        	"bg_color": "#fff",
        	"color": "#333",
        	"flag": 1,
        	"name": "测一测",
          "hasEntity":true,
        },
        staticImgs:{
          bg: this.imgBaseURL + '/scl/question-page/iq-spm/bg.jpg',
          decorate: this.imgBaseURL + '/scl/question-page/iq-spm/decorate.png',
          numBg:this.imgBaseURL + '/scl/question-page/iq-spm/num-bg.png',
          timeIcon:this.imgBaseURL + '/scl/question-page/iq-spm/time-icon.png',
          btn1:this.imgBaseURL + '/scl/question-page/iq-spm/btn-1.png',
          btn2:this.imgBaseURL + '/scl/question-page/iq-spm/btn-2.png',
          gift:this.imgBaseURL + '/scl/question-page/job-mbti/progree-img.png',
        },
        staticJobImgs:{
          bgTop: this.imgBaseURL + '/scl/question-page/job-mbti/bg-top.png',
          bgBottom: this.imgBaseURL + '/scl/question-page/job-mbti/bg-bottom.png',
          btn1:this.imgBaseURL + '/scl/question-page/job-mbti/btn-1.png',
          btn2:this.imgBaseURL + '/scl/question-page/job-mbti/btn-2.png',
          decorate:this.imgBaseURL + '/scl/question-page/job-mbti/decorate.png',
          
          gift:this.imgBaseURL + '/scl/question-page/job-mbti/progree-img.png	',
          timeIcon:this.imgBaseURL + '/scl/question-page/job-mbti/time-icon.png	',
          numBg:this.imgBaseURL + '/scl/question-page/job-mbti/num-bg.png',
        },
        staticLoveImgs:{
          bgTop: this.imgBaseURL + '/scl/question-page/love-mbti/bg-top.png',
          bgBottom: this.imgBaseURL + '/scl/question-page/love-mbti/bg-bottom.png',
          btn1:this.imgBaseURL + '/scl/question-page/love-mbti/btn-1.png',
          btn2:this.imgBaseURL + '/scl/question-page/love-mbti/btn-2.png',
          decorate:this.imgBaseURL + '/scl/question-page/love-mbti/decorate.png',
          
          gift:this.imgBaseURL + '/scl/question-page/love-mbti/progree-img.png	',
          timeIcon:this.imgBaseURL + '/scl/question-page/love-mbti/time-icon.png	',
          numBg:this.imgBaseURL + '/scl/question-page/love-mbti/num-bg.png',
        },
        legendArr:[
            this.imgBaseURL + '/scl/question-page/iq-spm/legend-1.png',
            this.imgBaseURL + '/scl/question-page/iq-spm/legend-2.png',
        ],
        legendJobArr:[
          this.imgBaseURL + '/scl/question-page/job-mbti/legend-1.png',
          this.imgBaseURL + '/scl/question-page/job-mbti/legend-2.png',
          this.imgBaseURL + '/scl/question-page/job-mbti/legend-3.png',
        ],
        legendLoveArr:[
          this.imgBaseURL + '/scl/question-page/love-mbti/legend-1.png',
          this.imgBaseURL + '/scl/question-page/love-mbti/legend-2.png',
          this.imgBaseURL + '/scl/question-page/love-mbti/legend-3.png',
        ],
        // legendLoveArr:[
        //   this.imgBaseURL + '/scl/question-page/iq-spm/legend-1.png',
        //   this.imgBaseURL + '/scl/question-page/iq-spm/legend-2.png',
        // ],
        topH:0,
        // percentNum:40,
        legendNum:0,
        reRenderLegend:false,
        selectIndex:-1,
        countTimeStr:'',
        startDateTime:0,
        reloadInputBox:false,
        currentInputCon:'',
        skipValidationFieldId:'9c423ad27f2e4af79a52c02d72d3721a', //该问题主观题输入框不需要进行校验；
        questionZiMu:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
        dHeight:0,
      }
    },
    computed:{
      progressNum(){
        if(this.percent<50){
            return this.percent*3.4 - 20
        }else{
          return this.percent*3.4
        }
      },
      legendImg(){
        // if(this.mbtiType == 'job-mbti'){
          return this.legendArr[this.legendNum]
        // }else{
        //   return this.legendLoveArr[this.legendNum]
        // }
      },
      // staticImgs(){
      //   return this.mbtiType == 'job-mbti' ? this.staticJobImgs : this.staticLoveImgs
      // },
      bgTop(){
        return this.mbtiType == 'job-mbti' ? this.staticImgs.bgTop : this.staticLoveImgs.bgTop
      },
      
    },
    watch:{
      countTime(val){
        if(val){
          this.countTimeStr = val
        }
      },
      questionObj: {
        // 主观题回显
        immediate: true,
        handler(val) {
          if (val?.ansData) {
            this.currentInputCon = val.ansData
          } else {
            this.currentInputCon = ''
          }
        }
      }
    },
    mounted() {
      
      this.topH = app.globalData.topHeight * 2
      countTimer = setInterval(()=>{
        this.legendNum = this.legendNum+1
        if(this.legendNum === this.legendArr.length){
            this.legendNum = 0
        }
        this.reRenderLegend = true
        this.$nextTick(()=>{
          this.reRenderLegend = false
        })
      },10*1000)
      // this.progressNum = 150
      this.startDateTime = this.$dayjs()
      clockTimer = setInterval(()=>{
        // 00:00 这种格式
        this.countTimeStr = this.$dayjs().subtract(this.startDateTime).format('mm:ss')
      },1000)
    },
    beforeDestroy(){
      clearInterval(countTimer)
    },
    methods:{
      inputEventHandle_1(e){
        //限制最多输入一个中文字符，否则提示
        // 判断输入的字符是否是中文
        const regChinese = /[\u4e00-\u9fa5]/;
        
        if (!regChinese.test(e) || e.length>1) {
            this.currentInputCon = ''; // 清空输入内容
            this.reloadInputBox = true; // 触发重新加载输入框
            this.$nextTick(() => {
                this.reloadInputBox = false;
            });
            
            this.$u.toast('最多只能输入一个中文字符'); // 提示用户
        }else{
          this.currentInputCon = e
        }
        
        this.$emit('changeCurrentInput',this.currentInputCon)
        
      },
      clearInput(){
        this.currentInputCon = ''
      },
      inputEventHandle(e){
        //只保留数字，如果有非数字的字符，去掉并提示用户
        const reg = /^[0-9]*$/
        if(!reg.test(e)){
          this.currentInputCon = this.currentInputCon.replace(/\D/g,'')
          this.currentInputCon = ''
          this.reloadInputBox = true
          this.$nextTick(()=>{
            this.reloadInputBox = false
          })
          
          this.$u.toast('请输入数字')
          return
        }
       
        this.currentInputCon = e
        
        if(this.currentInputCon>130 || this.currentInputCon < 1){
          this.currentInputCon = ''
          this.reloadInputBox = true
          this.$nextTick(()=>{
            this.reloadInputBox = false
          })
          
          this.$u.toast('请输入真实年龄')
        }
        
        this.$emit('changeCurrentInput',this.currentInputCon)
        
        console.log(this.currentInputCon,'====this.currentInputCon')
        console.log('-------inputEventHandle------',e)
      },
      previewImg(img){
        const imgArr = [img]
        uni.previewImage({
          urls:imgArr,
          current:imgArr[0]
        })
      },
      selectAnswer(item,index){
      	this.selectIndex = index;
      	this.$emit('updateSelectSclQuestion',index);
      }
    }
  }
</script>

<style scoped lang="scss">
  @keyframes shake {
    0% {
      transform: translateX(0) translateY(0);
    }
  
    50% {
      transform: translateY(-10%);
    }
  
    100% {
      transform:translateX(0) translateY(0);
    }
  }
  
  .scroll-y-view ::-webkit-scrollbar {
  	display: block !important;
  	width: 6rpx !important;
  }
  
  
  
  
  
  // 条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

  
  .input-wrapper{
    // width: 590rpx;
    height: 90rpx;
    background: #F5F5F5;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 16rpx;
  }
  
  
.quesiton-page-iq{
  background-color: #E9E8FF;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
  overflow-x:hidden;
  
  height: 100%;
  width: 100%;
  min-height: 100vh;
  
  
   // 加这两行代码是为了固定定位 解决此页面上下可滑动回弹问题
  // position: fixed;
  // width: calc(100vw - 110rpx);
  // height: calc(100vh - 100rpx);
  // padding: 50rpx 55rpx;
  
  .main-wrapper-abs{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    
    .main-wrapper{
      padding: 46rpx;
      padding-top: 8rpx;
      height: 100%;
      
      background-repeat: no-repeat;
      background-size: 100%;
      
      position: relative;
      
      .progress-wrapper-abs{
        position: absolute;
        top: 80rpx;
        left: 45rpx;
      }
      .progress-wrapper{
        position: relative;
        width: 400rpx;
        height: 30rpx;
        background: #2C1FA5;
        border-radius: 17rpx;
        
        .num-wrapper{
          position: absolute;
          top: -60rpx;
          width: 96rpx;
          height: 52rpx;
          
          
          background-repeat: no-repeat;
          background-size: 100%;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          // color: #71FFEE;
          color: #fff;
          // line-height: 42rpx;
          text-align: center;
          font-style: normal;
          
          z-index: 2;
        }
        
        .gift-wrapper{
          position: absolute;
          right: -70rpx;
          top: -68rpx;
          height: 164rpx;
          width: 164rpx;
          
          // animation-iteration-count: infinite;
          // animation-name: shake;
          // animation-duration: 1900ms;
          // animation-delay: 0;
          // animation-timing-function: ease;
          
          .img{
            width: 100%;
            height: 100%;
          }
        }
      }
      
      .decorate-wrapper{
        position: absolute;
        right: 74rpx;
        top: 10rpx;
        width: 146rpx;
        height: 142rpx;
        overflow: hidden;

        .img{
          width: 100%;
          height: 100%;
        } 
      }
      
      .card-wrapper-abs{
        position: absolute;
        top: 144rpx;
        z-index: 3;
      }
      .card-wrapper{
        width: 660rpx;
        height: 936rpx;
        max-height: 936rpx;
        // height: fit-content;
        background: #FFFFFF;
        box-shadow: 0rpx 6rpx 20rpx 0rpx #B0B5EC;
        border-radius: 46rpx;
        box-sizing: border-box;
        padding: 26rpx 34rpx;
        // margin-top: 144rpx;
        position: relative;
        // overflow: scroll;
        
        display: flex;
        flex-direction: column;
        // align-items: center;
        overflow: hidden;

        .abs-dd{
          position: absolute;
          right: 0;
          top: 0;
          height: 30rpx;
          width: 200rpx;
          border-radius: 0 46rpx;
        
          background-color: #fff;
          z-index: 2;
        }
        
        .clock-wrapper{
          position: absolute;
          right: 44rpx;
          top: 28rpx;
          
          
          display: flex;
          align-items: center;
          .clock-icon{
            width: 38rpx;
            height: 38rpx;
            margin-right: 8rpx;
          }
          .clock-text{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 30rpx;
            color: #999999;
            line-height: 42rpx;
            text-align: left;
            font-style: normal;
          }
        }
        
        .row-1{
          display: flex;
          align-items: center;
          // margin-bottom: 30rpx;
          
            .col-1{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #5A8CF4;
              // line-height: 40rpx;
              text-align: left;
            }
            .col-2{
              margin-left: 8rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #5A8CF4;
              // line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
            .col-3{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 20rpx;
              color: #5A8CF4;
              // line-height: 28rpx;
              text-align: left;
              font-style: normal;
              padding-top: 5rpx;
            }
        }
        
        .question-box{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 32rpx;
          color: #333333;
          line-height: 54rpx;
          text-align: justify;
          font-style: normal;
          // margin-bottom: 12rpx;
          
          margin-bottom: 18rpx;
        }
        
        .question-img-box{
          width: 400rpx;
          // max-height: 260rpx;
          height: 260rpx;
          margin: auto;
          margin-bottom: 20rpx;
          margin-top: 12rpx;
          .img{
            width: 100%;
            height: 100%;
          }
        }
        
        .options-warpper{
          display: flex;
          flex-direction: column;
          row-gap: 30rpx;
          
          .opt-item{
            width: 593rpx;
            // height: 90rpx;
            background: #F5F5F5;
            border-radius: 8rpx;
            
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 28rpx;
            color: #333333;
            // line-height: 90rpx;
            text-align: left;
            font-style: normal;
            padding: 24rpx 26rpx;
            box-sizing: border-box;
            
            .img{
              width: 169rpx;
              height: 108rpx;
            }
            
          }
          
          .opt-item-act{
            color: #FFFFFF;
            background: linear-gradient( 90deg, #575AFF 0%, #9CA2FF 100%);
          }
        }
        
        
      }
      
      .btn-group-wrapper{
            // margin-top: 24rpx;

          // position: absolute;
          // bottom: -112rpx;
          
          // left: 0;
          // right: 0;
          // z-inde:3;
          
          display: flex;
          justify-content: space-between;
          column-gap: 20rpx;
          margin-top: 22rpx;
          
          
          .btn-box{
            width: 204rpx;
            height: 92rpx;
            
            background-repeat: no-repeat;
            background-size: 100%;
            
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            line-height: 92rpx;
            text-align: center;
            text-align: center;
            font-style: normal;
          }
          
        }
      
      

    }
  }
  
  
  @keyframes showDivAni{
  	0%{opacity:0;}
  	100%{opacity: 1;}	
  }
  
  .decorate-bottom{
    // width: 750rpx;
    position: fixed;
    z-index: 2;

    width: 660rpx;
    height: 190rpx;
    bottom: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    // right: 0;
    
    animation:showDivAni .8s 1;
    .img{
      width: 100%;
    }
    pointer-events: none;
  }
  
  .bg-bottom{
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    
    width: 750rpx;
    height: 800rpx;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
  }
}


.scroll-wrap{
  flex: 1;
  height: 0;
  width: 100%;
  position: relative;
}



.opt-imgs-wrapper{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 36rpx;
  row-gap: 30rpx;
  column-gap: 18rpx;
  justify-content: center;
  
  &::after {
  	display: block;
  	width: 100%;
  	content: "\00A0";
  	overflow: hidden;
  	opacity: 0;
  	height: 1rpx;
  }

  .opt-item-box{
     // height: 115rpx;
     // height: 165rpx;
     background: #F5F5F5;
     border-radius: 8rpx;
     display: flex;
     align-items: center;
     justify-content: center;

     padding:12rpx;
     .text-wrapper{
       height: 108rpx;
       font-family: PingFang-SC, PingFang-SC;
       font-weight: 800;
       font-size: 28rpx;
       color: #333333;
       line-height: 40rpx;
       text-align: left;
       font-style: normal;
       margin-right: 12rpx;
     }
    
    .img{
      width: 156rpx;
      height: 100rpx;
      background-color: #fbfbfb;
    }
  }
  
  .opt-item-act{
    background: linear-gradient( 90deg, #85AEFF 0%, #74A2FB 100%);
  }
}


.opt-wrapper{
  display: flex;
  flex-direction: column;
  row-gap: 30rpx;
  
  .opt-item-box{
    width: 593rpx;
    background: #F5F5F5;
    border-radius: 8rpx;
    
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 800;
    font-size: 28rpx;
    color: #333333;
    text-align: left;
    font-style: normal;
    padding: 24rpx 26rpx;
    box-sizing: border-box;
    
  }
  
  .opt-item-act{
    color: #FFFFFF;
    background: linear-gradient( 90deg, #85AEFF 0%, #74A2FB 100%);
  }
}
</style>